<template>
  <div class="dialogContainer">
    <el-dialog
      v-dialogDrag
      title="选择变量"
      :modal-append-to-body="false"
      :visible.sync="$store.state.matlab.isShowChooseVariable"
      width="40%"
      @open="setChoosedVariable"
    >
      <el-table
        ref="multipleTable"
        :data="variables"
        stripe
        border
        height="400px"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="Name" label="Name" width="75" />
        <el-table-column prop="Type" label="Type" />
        <el-table-column label="Value">
          <template slot-scope="scope">
            <div v-if="!scope.row.tooLong">
              {{ scope.row.Value }}
            </div>
            <div v-else>
              {{ scope.row.ellipsis }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="closeChooseVariable()">取 消</el-button>
        <el-button type="primary" size="mini" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-es';
export default {
  name: 'ChooseVarDialog',
  computed: {
    variables: function() {
      return this.$store.getters['matlab/getProcessedVariables'];
    }
  },
  methods: {
    submit() {
      const arr = this.$refs.multipleTable.selection;
      this.closeChooseVariable();
      this.$store.commit('matlab/setSelectedVars', cloneDeep(arr));
    },
    setChoosedVariable() {
      setTimeout(() => {
        const selectedVars = this.$store.state.matlab.selectedVars;
        for (var i = 0; i < this.variables.length; ++i) {
          var contained = false;
          for (var j = 0; j < selectedVars.length; ++j) {
            if (this.variables[i].Name === selectedVars[j].Name) {
              this.$refs.multipleTable.toggleRowSelection(this.variables[i], true);
              contained = true;
              break;
            }
          }
          if (!contained) {
            this.$refs.multipleTable.toggleRowSelection(this.variables[i], false);
          }
        }
      }, 0);
    },
    closeChooseVariable() {
      this.$store.commit('matlab/showChooseVariable', { isShow: false });
    }
  }
};
</script>

<style lang="scss">
</style>
